import { reactive, ref, h } from "vue";
import { LotDto } from "@/config/lot.dto";
import { doInqLotList } from "@/api/lot/lot";
import { addDialog } from "@/components/reDialog";
import LotDetail from "@/components/LotMgt/LotDetail.vue";
import { VxeGridProps } from "vxe-table";
interface RowVO {
  id: number;
  name: string;
  nickname: string;
  role: string;
  sex: string;
  age: number;
  address: string;
}

const lotList = ref([]);
const lotParams = reactive(LotDto);
// const LotDetail = ref({})

const onQuery = () => {
  getLotListData();
  console.log(gridOptions.columns);
  console.log(gridOptions.data[0].address);
};

const getLotListData = async () => {
  const data = await doInqLotList(lotParams);
  console.log(data);
  lotList.value = data;
};

function handleDetail(data) {
  addDialog({
    width: "30%",
    title: "Lot Detail",
    contentRenderer: () => h(LotDetail, { data }),
    closeCallBack: () => {}
  });
}

const setFullScreen = () => {
  console.log("Full Screen");
};

const gridOptions = reactive<VxeGridProps<RowVO>>({
  border: true,
  showOverflow: true,
  class: "sortable-column-demo",
  //要实现列拖动，所以必须有key
  columnConfig: {
    useKey: true
  },
  scrollX: {
    enabled: false
  },
  toolbarConfig: {
    custom: true
  },
  height: "auto",
  editConfig: {
    trigger: "click",
    mode: "cell",
    //编辑之前判断，第一列不可以编辑
    beforeEditMethod({ columnIndex }) {
      if (columnIndex === 1) {
        return false;
      }
      return true;
    }
  },
  columns: [
    { type: "seq", width: 50, fixed: "left" },
    {
      field: "name",
      title: "Name",
      fixed: "left"
    },
    {
      field: "name",
      title: "Name",
      editRender: {},
      slots: { edit: "name_edit" }
    },
    { field: "sex", title: "Sex", editRender: {}, slots: { edit: "sex_edit" } },
    { field: "age", title: "Age", editRender: {}, slots: { edit: "age_edit" } },
    {
      field: "address",
      title: "Address",
      // editRender: {},
      // slots: { edit: "address_edit" },
      fixed: "right"
    }
  ],
  data: [
    {
      id: 10001,
      name: "Test1",
      nickname: "T1",
      role: "Develop",
      sex: "Man",
      age: 28,
      address: "Shenzhen"
    },
    {
      id: 10002,
      name: "Test2",
      nickname: "T2",
      role: "Test",
      sex: "Women",
      age: 22,
      address: "Guangzhou"
    },
    {
      id: 10003,
      name: "Test3",
      nickname: "T3",
      role: "PM",
      sex: "Man",
      age: 32,
      address: "Shanghai"
    },
    {
      id: 10004,
      name: "Test4",
      nickname: "T4",
      role: "Designer",
      sex: "Women",
      age: 23,
      address: "Shenzhen"
    },
    {
      id: 10005,
      name: "Test5",
      nickname: "T5",
      role: "Develop",
      sex: "Women",
      age: 30,
      address: "Shanghai"
    }
  ]
});

export { onQuery, handleDetail, setFullScreen, lotParams, gridOptions };
